<template>
  <div v-if="detail" style="display: none">
    <div :id="id" style="font-size: 12px; padding: 0 20px 0 5px">
      <div style="text-align: center; font-size: 16px; margin-bottom: 5px">
        {{ shopName }}
      </div>
      <img class="barcode" style="width: 100%" />
      <div>订单号：{{ detail.orderNo }}</div>
      <div>手机号码：{{ detail.customPhone }}</div>
      <div style="margin-bottom: 5px">
        取鞋日期：{{
          detail.shoeCollectionDate
            ? formatDateTime(Number(detail.shoeCollectionDate))
            : "-"
        }}
      </div>
      <div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
          "
        >
          <div>商品信息</div>
          <div style="margin-left: 20px">数量</div>
        </div>

        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
          "
          v-for="item in detail.orderGoodPoList"
        >
          <div>
            {{ item.name}}[{{
               item.price.toFixed(2)
            }}(元)][{{ item.buyNum }}]
          </div>
          <div style="margin-left: 20px">{{ item.buyNum }}</div>
        </div>
      </div>

      <div style="margin-bottom: 5px">
        <div>商品总额：{{ detail.totalPrice.toFixed(2) }} （元）</div>
        <div>鞋子数量：{{ detail.shoeNum }} 双</div>
        <div>
          优惠金额：{{
            (detail.totalPrice - detail.orderPrice).toFixed(2)
          }}（元）
        </div>
        <div>订单金额：{{ detail.orderPrice.toFixed(2) }}（元）</div>
      </div>
      <div style="margin-bottom: 5px">
        商家备注： {{ detail.shopRemark || "-" }}
      </div>
      <div>{{ printTime }}</div>
    </div>

    <button ref="printBtn" @click="setTime" v-print="printObj">
      Print local range
    </button>
  </div>
</template>

<script>
import { formatDateTime } from "@/utils/formate";
import JSBarcode from "jsbarcode";
export default {
  props: ["id", "detail", "shopName", "productListMap"],
  data() {
    return {
      printTime: "",
      printObj: {
        id: this.id,
        popTitle: "订单小票",
      },
    };
  },

  watch: {
    detail: {
      handler() {
        this.$nextTick(() => {
          JSBarcode(".barcode", this.detail.orderNo, {
            height: 60,
            displayValue: false,
          });
        });
      },
      deep: true,
    },
  },

  methods: {
    formatDateTime,
    setTime() {
      this.printTime = formatDateTime(
        new Date().getTime(),
        "YYYY-MM-DD HH:mm:ss"
      );
    },
  },
};
</script>
